<template>
    <div>
        <el-row>
  <el-col :span="12"><div class="grid-content bg-purple"><el-button-group>
            <el-button @click="addUI" type="success" icon="el-icon-edit">添加</el-button>
            
            </el-button-group></div></el-col>
  <el-col :span="5"><div class="grid-content bg-purple-light">
            <el-date-picker
              v-model="applyDate"
              type="date"
              placeholder="根据时间查询">
            </el-date-picker>
            </div></el-col>
  <el-col :span="7"><div class="grid-content bg-purple-light" style="float:left">
    <el-button @click="find()" type="success" icon="el-icon-search"></el-button>
  </div></el-col>
</el-row>


          <el-table   
            border
            style="width: 100%"
            :data="requisition.records"
            ref="userTable"
            >
            <el-table-column
            type="selection"
            width="55">
            </el-table-column>

            <el-table-column v-for="column in columns" :key="column.prop"
            :prop="column.prop"
            :label="column.label"
            :width="column.width">
            </el-table-column>

            <!--操作列-->
            <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="DetailPages(scope.row)" type="success">查看详情</el-button>

                  
                    <el-button
                    size="mini" v-if="scope.row.applystate=='申请中'"
                    @click="handleEdit(scope.row)">编辑</el-button>
                    
                    
                
                  <el-button v-if="scope.row.applystate=='申请中'"
                  @click="handleDelete(scope.row)" size="mini"
                   type="danger" >删除</el-button>
              
                </template>
            </el-table-column>

        </el-table>

        <!--分页 -->
         <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="requisition.current"
            :page-sizes="[2,3,4,5]"
            :page-size="requisition.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="requisition.total">
        </el-pagination>


           

          
         <!--添加-->
        <el-dialog title="添加需要申请信息" :visible.sync="addTag" 
        :close-on-click-modal="false" top="10px">
            <el-form label-width="100px">
                    
                        <el-table
        :data="tableData"
        style="width: 100%"
        class="list-table"
        size="mini"
        border>
        <el-table-column label="产品名称" align="center" prop="materialid">
          <template slot-scope="scope">
              <el-select v-model="scope.row.materialid" placeholder="请选择">
                  <el-option
                  v-for="item in Materials"
                  :key="item.materialid"
                  :label="item.materialname"
                  :value="item.materialid">
                  </el-option>
                    </el-select>
          </template>
        </el-table-column>
          <el-table-column label="数量" align="center" prop="count">
            <template slot-scope="scope">
              <el-input v-model="scope.row.count"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="单价" align="center" prop="price">
            <template slot-scope="scope">
              <el-input v-model="scope.row.price"></el-input>
            </template>
          </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="addParamsSetting">新增</el-button>
            <el-button type="primary" size="small" @click.native.prevent="deleteRow(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
           
               
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addTag = false">取 消</el-button>
                <el-button type="primary" @click="add()">确 定</el-button>
            </div>
            </el-dialog>


            <!--详情信息-->
        <el-dialog title="采购申请详情信息" :visible.sync="DetailTag" 
        :close-on-click-modal="false" top="10px">
            <el-form label-width="100px">
                    
                    <el-row>
  <el-col :span="12" v-for="re in requisition.records" :key="re.applyid" ><div style="font-size:20px;" class="grid-content bg-purple-light" v-if="reappid.applyid==re.applyid">
            申请人:{{reappid.user.realname}}

            </div></el-col>
  <el-col :span="12"><div style="font-size:20px;" class="grid-content bg-purple-light">
            申请时间:{{reappid.applydate}}
            </div></el-col>
 
</el-row>

                      <el-table   
            border
            style="width: 100%"
            :data="requisition2"
            ref="userTable"
            >

            <el-table-column v-for="column in columns2" :key="column.prop"
            :prop="column.prop"
            :label="column.label"
            :width="column.width">
            </el-table-column> 

             <!--自定模板-->
             <el-table-column label="总计">
                <template slot-scope="scope">
                     {{scope.row.price*scope.row.count}}
                </template>
             </el-table-column>
                      </el-table> 

                      <el-row>
  <el-col :span="12"  ><div style="font-size:20px;" class="grid-content bg-purple-light">
            审核人:{{reappid.approver}}

            </div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light" style="font-size:20px;">
            总数量:{{reappid.sumcount}}
            </div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light" style="font-size:20px;">
            总金额:{{reappid.sumprice}}
            </div></el-col>
 
</el-row>
               
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="DetailTag = false">返 回</el-button>
            </div>
            </el-dialog>



    </div>
</template>

<script>
export default {
    name: "",
    data() {
        return {
        tableData: [{
          materialid: '',
          count: '',
          price: '',
        }],

          columns:[
              {prop:'applyid',label:'采购编号',width:'300'},
              {prop:'user.realname',label:'申请人',width:'200'},
              {prop:'applydate',label:'申请时间',width:'300'},
              {prop:'planid',label:'是否制定计划',width:'100'},
              {prop:'approver',label:'审批人',width:'100'},
              {prop:'sumcount',label:'总数量',width:'100'},
              {prop:'sumprice',label:'总金额',width:'100'},
              {prop:'applystate',label:'状态',width:'100'},
          ],
          columns2:[
              {prop:'material.materialname',label:'产品名称',width:'100'},
              {prop:'material.unit',label:'单位',width:'100'},
              {prop:'count',label:'数量',width:'100'},
              {prop:'price',label:'单价',width:'100'},
          ],
          requisition:{},
          requisition2:{},
          applyDate:"",
          addTag:false,
          DetailTag:false,
          Materials:[],
          reappid:[],
        }
    },
    components: {},
    methods: {
       addList () {
      this.tableData.push({
        materialid: '',
        count: '',
        price: '',
      })
    },
    // 新增行
    addParamsSetting () {
      this.addList()
    },
    // 删除当前行
    deleteRow (index) {
      this.tableData.splice(index, 1)
    },
    submitFun() {
      console.log(this.tableData)
    },
        

        find(page=1,size=3){
          let url="/requisition/selectApply";
          let params=new URLSearchParams();
          params.append('page',page);
          params.append('size',size);
          params.append('applyDate',this.applyDate);
          this.$axios.post(url,params).then(resp=>{
                console.log(resp.data);
               this.requisition=resp.data;
          });
      },
      handleSizeChange(size){
             this.find(this.requisition.current,size);
      },
      handleCurrentChange(page){
         this.find(page,this.requisition.size);
      },
      //删除
      handleDelete(row){
        console.log(row.applyid);
          
        //异步删除
        var url="requisition/deleteDetails";  
        var params=new URLSearchParams();
        params.append("id",row.applyid);
        this.$axios.post(url,params).then(resp=>{
            this.$message({
              message:"删除成功:"+row.materialid,
              type:"success"
          })
          this.find();
        });
        
      },
      addUI(){
        let url="/material/Materials";
        this.$axios.post(url).then(resp=>{
            console.log(resp.data);
            this.addTag=true;
            this.Materials=resp.data;
          });
      },
      add(){
        console.log(this.tableData);
        let url="requisition/insertApply";
        let params=this.tableData;
        this.$axios.post(url,params).then(resp=>{

            this.addTag=false;
               this.material={};
               this.find();
          });
          
      },
      DetailPages(row){
        console.log(this.requisition);
        this.reappid=row;
        console.log(row);
        let url="/requisition/selectDetails";
        let params=new URLSearchParams();
        params.append('applyid',row.applyid);
        this.$axios.post(url,params).then(resp=>{
            console.log(resp.data);
            this.requisition2=resp.data;
            this.DetailTag=true;

        });

      },
      columnStyle({ row, column, rowIndex, columnIndex }) {
      //注意：第一行的索引为0
      if (columnIndex === 2) {
        //如果有多个css样式，使用;隔开
        return 'color:red;cursor: pointer'
      }
    },

    },
    mounted() {
        this.find();
    },
    

}
</script>

<style  scoped>
</style>
